<template>
	<view class="t-login paddingContentbig">
		<view class="t-b">
			<!-- <cicon style="margin-right: 16rpx;" name="music" :size="70"></cicon> -->
			<image :src="logo" mode="aspectFit"></image>
			{{title}}
		</view>
		<form class="cl">
			<view class="t-a">
				<view>
				<cicon name="server"></cicon>
				</view>
				<input v-model="form.server_url" placeholder="服务器地址（IP地址或域名)" placeholder-class="placeholder" />
			</view>
			<view class="t-a">
				<view><cicon name="user"></cicon></view>
				<input v-model="form.username" placeholder="用户名" placeholder-class="placeholder" />
			</view>
			
			<view class="t-a">
				<view><cicon name="password"></cicon></view>
				<input v-model="form.password" type="text" password="password" placeholder="密码" placeholder-class="placeholder" />
			</view>
			 
			<button hover-class="hoverItem" @click="login">
				登入
				 
				<cicon name="enter" v-if="!isLoading" :size="60" color="#ffffff"></cicon>
				<view class="loading" v-else>
					<view><cicon name="loading"  color="#ffffff"></cicon></view>
				</view>
				 
			</button>
		</form>
	</view>
</template>
<script>
	import logo from '@/static/logo.png' 
	export default {
		 
		data() {
			return {
				title: '登录到音乐服务器',
				form:{
					server_url:'',
					username:'',
					password:''
				},
				isLoading:false,
				logo
			}
		},
		 
		methods: {
			login(){
				//验证
				if(this.form.server_url===''){
					this.$TOOL.msg('请输入服务器地址')
					return false
				}
				if(this.form.username===''){
					this.$TOOL.msg('请输入用户名')
					return false
				}
				if(this.form.password===''){
					this.$TOOL.msg('请输入密码')
					return false
				}
				if(this.isLoading){
					return false
				}
				
				this.isLoading = true
				
				 
				
				
				uni.request({
					url: this.form.server_url+this.$API.login.url, //仅为示例，并非真实接口地址。
					data: {
						account:this.form.username,
						passwd:this.form.password,
					},success: (e) => {
						if(e.data.success){
							this.$TOOL.data.set('server_url',this.form.server_url)
							this.$TOOL.data.set('sdid',e.data.data)
							this.$TOOL.data.set('username',this.form.username)
							// 保存这个服务器信息
							this.$API.get_base_info.request({
								_sid:this.$TOOL.getSid(), 
							}).then((e)=>{
								let serverItem = {
									host:this.form.server_url,
									hostname:e.data.hostname,
									account:this.form.username,
									passwd:this.form.password,
								}
								this.$TOOL.serverManage.add(serverItem)
								this.isLoading = false
								// //登录成功跳转至首页
								this.$nextTick(()=>{
									uni.redirectTo({
										url: '/pages/index/index'
									});
								})
							})
							
						}else{
							this.$TOOL.msg('用户名或密码错误')
							this.isLoading = false
						}
						
					}
				});
				
				 
			},
		}
	}
</script>
<style scoped lang="scss">
	.t-login {
		 
		margin: 0 auto;
		font-size: 28rpx;
		color: #000;
		 
	}

	.t-login button { 
		background: #000;
		color: #ffffff; 
		height: 100rpx;
		width: 280rpx;
		padding: 0 50rpx;
		border-radius: 8rpx;
		float: right;
		margin-top: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 40rpx;
		.loading{
			width: 60rpx;
		} 
	}

	.t-login input {
		padding: 0 20rpx 0 120rpx;
		height: 90rpx;
		line-height: 90rpx;
		margin-bottom: 50rpx;
		background: #f4f4f4;
		font-size: 26rpx;
		border-radius:8rpx
	}

	.t-login .t-a {
		position: relative
	}

	.t-login .t-a >view {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 40rpx;
		top: 28rpx;
		border-right: 2rpx solid #dedede;
		padding-right: 20rpx;
		 
	}

	.t-login .t-b {
		text-align: left;
		font-size: 40rpx;
		// font-weight: 900;
		color: #333333;
		padding: 100rpx 0;
		padding-bottom: 200rpx;
		padding-top: 200rpx;
		display: flex;
		align-items: center;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		image{
			width: 60rpx;
			height: 60rpx;
			margin-right: 20rpx;
		}
		 
	}

	.t-login .t-c {
		position: absolute;
		right: 22rpx;
		top: 22rpx;
		background: #000;
		color: #fff;
		font-size: 24rpx;
		border-radius: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 25rpx
	}

	.t-login .t-d {
		text-align: center;
		color: #999;
		margin: 80rpx 0
	}

	.t-login .t-e {
		text-align: center;
		width: 250rpx;
		margin: 80rpx auto 0
	}

	.t-login .t-g {
		float: left;
		width: 50%
	}

	.t-login .t-e image {
		width: 50rpx;
		height: 50rpx
	}

	.t-login .t-f {
		text-align: center;
		margin: 80rpx 0 0 0;
		color: #666
	}

	.t-login .t-f text {
		margin-left: 8rpx;
		color: #999
	}

	.t-login .uni-input-placeholder {
		color: #000
	}

	.cl {
		zoom: 1
	}

	.cl:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20'
	}
	
	.placeholder{
		opacity: 0.6;
	}
</style>
